<script setup>
import { ref, getCurrentInstance } from "vue";
import { debounce } from "lodash";
import { loginByCaptcha } from "@/api/login.js";

const { proxy } = getCurrentInstance();

const loading = ref(false);
const form = ref({
  mobile: ""
});
const code = ref("");
const getCode = debounce(async () => {
  if (!form.value.mobile) return proxy.$modal.msgError("请输入手机号码");
  if (!/^1[3-9]\d{9}$/.test(form.value.mobile)) return proxy.$modal.msgError("请输入正确的手机号码");
  try {
    loading.value = true;
    const { data } = await loginByCaptcha(form.value);
    code.value = data;
    proxy.$modal.msgSuccess("验证码获取成功");
    loading.value = false;
  } catch (err) {
    loading.value = false;
    console.log(err);
  }
}, 500);
</script>

<template>
  <div class="app-container">
    <el-form v-loading="loading">
      <el-form-item label="手机号码" required>
        <el-input style="width: 250px" clearable maxlength="11" v-model.number="form.mobile" placeholder="请输入"></el-input>
        <el-button type="primary" @click="getCode">获取验证码</el-button>
      </el-form-item>
      <el-form-item label="验证码">
        {{ code }}
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss"></style>
